<template>
	<view class="">
		<!-- <view class="bg-white pl-10 pr-10">
			<u-tabs 
				:list="subsectionList" 
				:current="curNow" 
				keyName="label" 
				lineColor="#e54d42" 
				:activeStyle="{color:'#e54d42'}" 
				@change="sectionChange"
			/>
		</view> -->
		<view class="my-list">
			<!-- :height="swiperHeight" -->
			<u-list @scrolltolower="scrolltolower" v-if="dataList.length > 0">
				<u-list-item v-for="(item, index) in dataList" :key="index">
					<view 
						class="bg-white border-radius-10 mt-20"
						@click="$u.route(
							item.orderType===12?'/pages/order/details/cardEntryList':
							item.orderType===11?'/pages/order/details/projectDetails':
							item.orderType===1?'/pages/order/details/productDetails':'',
							{id:item.orderId}
						)"
					>
						<view class="padding-20 border-b">
							<view class="fweigh-600">{{item.orderTypeText}}</view>
							<view class="mt-10 flex fsize-26">
								<view class="w-50">
									<text>业绩金额:</text>
									<text class="fsize-24 line-red ml-10">￥</text>
									<text class="fsize-32 line-red">{{item.orderAmount}}</text>
								</view>
								<view class="w-50">
									<text>提成金额:</text>
									<text class="fsize-24 line-red ml-10">￥</text>
									<text class="fsize-32 line-red">{{item.bonusAmount}}</text>
								</view>
							</view>
						</view>
						<view class="padding-20 fsize-26">
							<text class="line-green">{{item.bonusTypeText}}</text>
							<text class="line-gray ml-10">·</text>
							<text class="line-gray ml-10">{{item.statusText}}</text>
							<text class="line-gray ml-10">·</text>
							<text class="line-gray ml-10">{{item.createTime}}</text>
						</view>
					</view>
				</u-list-item>
				<u-loadmore 
					:status="loadmore.status" 
					:icon-type="loadmore.iconType" 
					:load-text="loadmore.loadText.loadText" 
					margin-top="20"
					margin-bottom="20" 
				/>
			</u-list>
		</view>
		<!-- 无数据时默认显示 -->
		<view class="emptybox" v-if="dataList.length == 0">
			<u-empty icon-size="150" text="暂无数据" mode="data"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import listHeightMixin from '@/common/computedAltitude.js'
	export default {
		mixins:[listHeightMixin],
		data() {
			return {
				subsectionList: [
					{ label: '全部', value: 0 }, 
					{ label: '待确认', value: 1 },
					{ label: '待付款', value: 2 },
					{ label: '待发放', value: 3 },
					{ label: '已发放', value: 4 },
					{ label: '未通过', value: 5 },
					{ label: '已取消', value: 6 },
				],
				loadmore:{
					status: 'loadmore',
					iconType: 'flower',
					loadText: {
						loadmore: '轻轻上拉',
						loading: '努力加载中',
						nomore: '实在没有了'
					},
				},
				curNow: 0,
				dataList: [],
				searchData: {
					page: 1,
					limit: 40,
					staffId: 0,
				}
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad() {
			let that = this
			this.searchData.staffId = this.userInfo.userId
			this.getPageList(0);
		},
		methods: {
			sectionChange(e) {
				if (this.curNow === e.index) return
				this.curNow = e.index;
				this.searchData.type = e.value
				this.searchData.page = 1
				this.dataList = []
				this.getPageList()
			},
			getPageList() {
				this.$reqPost('GetStoreStaffBonusList', this.searchData).then(res => {
					this.dataList = [...this.dataList, ...res.data]
					if (res.count > this.dataList.length) {
						this.loadmore.status = 'loadmore';
						this.searchData.page++;
					} else {
						// 数据已加载完毕
						this.loadmore.status = 'nomore';
					}
				})
			},
			scrolltolower() {
				if (this.loadmore.status === 'loadmore') {
					this.getPageList();
				}
			}
		}
	}
</script>
